<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backTo()"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">我的消息</view>
		</view>	
		
		<view class="nav" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="navauto">
				<block v-for="(item, index) in menu" :key="index">
					<view class="menu" :data-index="index" @tap="setNavMenu">
						<view class="text" :class="index == select ? 'menucolor' : ''">{{ item.text }}</view>
						<view class="line" :class="index == select ? 'menucolor02' : ''">
							<image src="/static/xiao.png" mode="widthFix"></image>
						</view>
					</view>
				</block>
			</view>
		</view>
		
		
		<view class="bg_box">
			<image class="bg01" src="/static/bg05.png" mode="widthFix"></image>
			<view class="bg_content">
				<block v-if="list.length > 0">
					<view class="tidings_box" v-for="(item, index) in list" :key="index">
						<view class="time">{{ item.st | formatTime}}</view>
						<view class="content">
							<view class="title_box">
								<view class="round"></view>
								<view class="title">{{item.title}}</view>
							</view>
							<view class="text">
								<u-parse :content="item.msg"></u-parse>
							</view>
						</view>
					</view>
				</block>
			
				<block v-if="list.length==0">
					<view style="height:30vh;padding-top:25vw;width:100%;" >
						<u-empty text="暂无消息" mode="list"></u-empty>
					</view>
				</block>

			
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				select:0,
				page:1,
				scrrol:false,
				load_type: 'more',
				empty_show : 0,
				list : [],
				info: [
					{
						time: '2020-08-31 :18:08:29',
						title: '各位土豆好车会员们大家好:',
						text: [
							{
								t: '为了给大家带来更好的体验，土豆好车将于9月1日进行更新，本次更新内容如下:'
							},
							{
								t: '1、调整部分商品补贴红包的金额，最高可得2.6元红包补贴;'
							},
							{
								t: '2、优化部分商品信息，体验更多乐趣;'
							},
							{
								t: '3、对土豆好车进行其他体验上的优化;'
							},
							{
								t: '以上就是本次更新的所有内容啦，祝各位会员们生活快乐，万事如意!'
							}
						]
					}
				],
				menu: [
					{
						text: '站内信'
					},
					{
						text: '系统消息'
					},
				],
				
			}
		},
		onReachBottom() {
	         this.loadData();
		},
		onLoad() {
            this.loadData();
		},
		methods: {
			page_init(){
				this.list = [];
				this.load_type = 'more';
				this.page = 1;
				this.loadData();
			},
			loadData() {
				if(this.load_type == 'loading' || this.load_type == 'no_more'){
					return;
				}
			    let url = this.site_url + 'api/index/msg_list?page='+this.page;
				let param = {
					msg_type : this.select
				};
				this.areq(url,param,'POST').then(res=>{
					this.empty_show = 1;
					 if(res.code == 1){
						 this.page++; 
						 this.list = [...this.list,...res.data];
					 }else{
						this.load_type = 'no_more';
					}
				});
			
			},
			setNavMenu(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.select = index;
				this.page_init();
			},
			setRule(e){
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.flowList[index].tick = !that.flowList[index].tick
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				this.$r(url);
			},

		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
	
	}
</script>

<style>
	
	.header{
		background-color: transparent !important;
	}
	
	.header .text{
		background-color: transparent !important;
		color: #333 !important;
	}
	
	.scrrolHeader{
		background-color: #F9E9E3 !important;
	}
	
	.bg_box{
		width: 100%;
		position: relative;
	}
	
	.bg_box .bg01{
		width: 100%;
	}
	
	.bg_box .bg_content{
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(27vw + var(--status-bar-height));
		z-index: 98;
	}
	
	.tidings_box {
		width: 92%;
		margin: 0 auto;
		margin-bottom: 5vw;
	}
	
	.tidings_box .time {
		font-size: 3vw;
		color: #999;
		text-align: center;
		height: 10.5vw;
		line-height: 10.5vw;
	}
	
	.tidings_box .content {
		background-color: #fff;
		border-radius: 1.5vw;
		padding:1.5vw 3vw 3vw 3vw;
		box-shadow: 0px 1px 4.65px 0.35px rgba(51, 51, 51, 0.09);
	}
	
	.tidings_box .content .title_box {
		display: flex;
	}
	
	.tidings_box .content .title_box .round {
		width: 2vw;
		height: 2vw;
		border-radius: 50%;
		background-color: #FF7F22;
		margin-top: 4.25vw;
	}
	
	.tidings_box .content .title_box .title {
		line-height: 10.5vw;
		font-size: 4vw;
		color: #333;
		margin-left: 1.5vw;
		font-weight: bold;
	}
	
	.tidings_box .content .text {
		font-size: 3vw;
		color: #333;
		line-height: 5vw;
	}
	
	.tidings_box .content .goods{
		width: 100%;
		display: flex;
	}
	
	.tidings_box .content .goods .goods_img{
		width: 24vw;
		height: 24vw;
		border-radius: 2vw;
		margin-right: 3vw;
	}
	
	.tidings_box .content .goods .goods_img image{
		width: 100%;
		height: 100%;
		border-radius: 2vw;
	}
	
	.tidings_box .content .goods .title{
		flex: 1;
		margin-right: 3vw;
		font-size: 3.5vw;
		color: #333;
		line-height: 5vw;
		display: flex;
		align-items: center;
	}
	
	.nav {
		width: 100%;
		height: 13.5vw;
		overflow: hidden;
		overflow-x: auto;
		position: fixed;
		left: 0;
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 999;
		/* background-color: #fff;
			border-bottom: 1px solid #e8e8e8; */
		box-sizing: border-box;
	}
	
	.nav .navauto {
		width: fit-content;
		display: flex;
		/* margin-left: 4%; */
		min-width: 100%;
	}
	
	.nav .navauto .menu {
		width: 50%;
		position: relative;
	}
	
	.nav .navauto .menu .text {
		font-size: 4.2vw;
		color: #666666;
		text-align: center;
		line-height: 13.5vw;
	}
	
	.nav .navauto .menu .line {
		width: 10%;
		border-radius: 3vw;
		position: absolute;
		left: calc(50% - 5%);
		bottom: 1vw;
		display: none;
	}
	
	.nav .navauto .menu .line image{
		width: 100%;
	}
	
	.menucolor {
		color: #091624 !important;
		font-weight: bold;
		font-size: 4.4vw !important;
	}
	
	.menucolor02 {
		display: block !important;
	}
	
	.menucolor03 {
		background-color: #FF9822 !important;
	}
	
	
	
	
</style>
